<template>
  <div class="register">
    <div class="form-row">
      <van-form  @submit="onSubmit">
        <van-field v-model="username" :rules="[{ required: true }]">
          <div slot="label" class="slot-label">
            <select v-model="active" class="select">
              <option :value="1">{{ $t('pageSign.phone') }}</option>
              <option :value="2">{{ $t('pageSign.email') }}</option>
            </select>
          </div>
          <div v-if="active === 1" slot="input" class="slot-inp">
            <span class="tel-area" @click="showPicker=true">{{ area_num }} -</span>
            <input v-model="username" type="number" class="van-field__control" :placeholder="$t('pageSign.phone')" />
          </div>
          <div v-else slot="input" class="slot-inp">
            <input v-model="username" type="text" class="van-field__control" :placeholder="$t('pageSign.email')" />
          </div>
          
        </van-field>
        <van-field v-model="verification_code" clearable :placeholder="$t('pageSign.pleaseEnterTheCode')" :rules="[{ required: true }]">
          <template #button>
            <van-button size="small" type="primary" block :disabled="times !== 60" @click.prevent="handleGetCode">
              <template v-if="times === 60">{{ $t('pageSign.send_code') }}</template>
              <template v-else>{{ times }}s</template>
            </van-button>
          </template>
        </van-field>
        <van-field v-model="password" type="password"  :placeholder="$t('pageSign.pleaseEnterThePwd')" :rules="[{ required: true }]" />
        <van-field v-model="confirm_password" type="password" :placeholder="$t('pageSign.pleaseEnterThePwd')" :rules="[{ required: true }]" />
        <van-field v-model="invitation_code"  :placeholder="$t('pageSign.invitation_code')" />
        <van-field v-model="ds_id" :disabled="is_leder === '0'" :placeholder="is_leder === '0'?'':'请输入导师id'" :rules="[{ required: is_leder === '0'?false:true }]" >
          <template #input v-if="is_leder === '0'">
            <van-radio-group v-model="is_leder" direction="horizontal">
              <van-radio name="0">{{$t('no_mentor')}}</van-radio>
              <van-radio name="1">{{$t('yes_mentor')}}</van-radio>
            </van-radio-group>
          </template>
          <template #button v-else>
            <van-radio-group v-model="is_leder" direction="horizontal">
              <van-radio name="0">{{$t('no_mentor')}}</van-radio>
              <van-radio name="1">{{$t('yes_mentor')}}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-button block type="info" native-type="submit" class="submit" :disabled="!checked">
          {{ $t('sign_up') }}
        </van-button>
        <van-checkbox v-model="checked" icon-size="16" class="checkbox-link">
          {{ $t('pageSign.agreed')
            }}<a @click.stop="goAgreement">{{ $t('pageSign.agreement') }}</a>
        </van-checkbox>
        <div class="links">
          <nuxt-link to="/sign/login">{{ $t('pageSign.has_account') }}</nuxt-link>
        </div>
      </van-form>
    </div>
    <van-popup v-model="showPicker" position="bottom" round>
      <van-picker show-toolbar :columns="areaNums" :visible-item-count="10" @confirm="confirmArea" @cancel="showPicker=false" />
    </van-popup>
    <div class="bg-icon"></div>
    <div class="max-bg">
    </div>
    <div class="min-bg"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import storage from '@/utils/storage'
import { areaNums } from '@/constants/area_nums'
import { isPhone, isEmail } from '@/utils/validator'
export default {
  i18n: {
    messages: {
      zh: {
        no_mentor: '否',
        yes_mentor: '是导师'
      },
      en: {
        no_mentor: 'no',
        yes_mentor: 'mentor'
      },
      jp: {
        no_mentor: 'いいえ',
        yes_mentor: '指導者です'
      },
      kr: { 
        no_mentor: '아니',
        yes_mentor: '스승' 
      }
    }
  },
  data () {
    return {
      loginType:"phone",
      areaNums,
      logo: require('@/assets/images/login_logo.png'),
      active: 1,
      username: '',
      password: '',
      confirm_password: '',
      verification_code: '',
      invitation_code: '',
      is_leder:"0",
      ds_id:"",
      checked: false,
      times: 60,
      area_num: '86',
      showPicker: false
    }
  },
  computed: {
    ...mapState({
      initInfo: index => index.initInfo
    })
  },
  mounted () {
    let regInfo = storage.get('regInfo')
    if (regInfo) {
      regInfo = JSON.parse(regInfo)
      this.active = regInfo.active
      this.username = regInfo.username
      this.password = regInfo.password
      this.confirm_password = regInfo.confirm_password
      this.verification_code = regInfo.verification_code
      this.invitation_code = regInfo.invitation_code
      this.$nextTick(() => { storage.remove('regInfo') })
    }
  },
  methods: {
    ...mapActions({
      getCode: 'user/getCode',
      register: 'user/register'
    }),
    isPhone,
    isEmail,
    changeTab (index) {
      console.log(index,'----')
      this.active = index
      this.username = ''
    },
    onSubmit (e) {
      if (this.password !== this.confirm_password) {
        this.$toast(this.$t('pageSign.pwd_err'))
        return false
      }
      const username = this.active === 1? `${this.area_num}-${this.username}`: this.username
      const payload = {
        username,
        password: this.password,
        verification_code: this.verification_code
      }
      if (this.invitation_code) { payload.invitation_code = this.invitation_code }
      this.$toast.loading()
      this.register(payload).then((res) => {
        this.$toast(res.msg)
        this.$router.replace('/sign/login')
      }).catch((res) => {
        this.$toast(res.msg)
      })
    },
    handleGetCode () {
      console.log('--------------')
      const username = this.active === 1 ? `${this.area_num}-${this.username}` : this.username
      this.$toast.loading()
      this.getCode(username).then(({ msg }) => {
        this.$toast(msg)
        this.getTime()
      }).catch(({ msg }) => {
        this.$toast(msg)
      })
    },
    getTime () {
      this.timer = setInterval(() => {
        this.times--
        if (this.times === 0) {
          clearInterval(this.timer)
          this.times = 60
        }
      }, 1000)
    },
    goAgreement () {
      const regInfo = {
        active: this.active,
        username: this.username,
        password: this.password,
        confirm_password: this.confirm_password,
        verification_code: this.verification_code,
        is_leder: this.is_leder,
        ds_id: this.ds_id,
        invitation_code: this.invitation_code
      }
      storage.set('regInfo', JSON.stringify(regInfo))
      this.$router.push({
        name: 'common-article',
        params: {
          url: this.initInfo.system_user_agreement,
          title: '用户协议'
        }
      })
    },
    confirmArea (values) {
      this.area_num = values.phone_code
      this.showPicker = false
    }
  }
}
</script>
<style lang="less" scoped>
.register{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px;
    line-height: 1;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(139deg, #203FFF 0%, #00B8FF 100%);
    .bg-icon{
        position: absolute;
        top: 97px;
        right: -124px;
        width: 341px;
        height: 362px;
        border-radius: 50%;
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.37) 100%);
        opacity: 0.18;
    }
    .max-bg{
      position: absolute;
      bottom: -150px;
      left: -150px;
      width: 300px;
      height: 300px;
      box-sizing: border-box;
      border-radius: 50%;
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.37) 100%);
      opacity: 0.1;
    }
    .min-bg{
      position: absolute;
      bottom: -100px;
      left: -100px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.37) 100%);
      opacity: 0.09;
    }
  .logo{
    margin-top: 45px;
    width: 58px;
    height: 58px;
    border-radius: 58px;
    background: #FFFFFF;
    img{
      width: 100%;
    }
  }
  .Hello{
    padding: 18px 0 12px 0;
    font-size: 41px;
    font-weight: 400;
    color: #FFFFFF;
  }
  .adLanguage{
    font-size: 19px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 26px;
  }
  .form-row{
    position: relative;
    margin-top: 45px;
    background: #FFFFFF;
    border-radius: 28px;
    z-index: 1;
    .tab{
      padding: 13px 8px 0 8px;
      ul{
        display: flex;
         border-bottom: #EBEBEB solid 1px;
        li{
          position: relative;
          flex: 1;
          height: 45px;
          line-height: 45px;
          font-size: 15px;
          color: #999999;
          text-align: center;
          &.current{
            color: #366FF9;
            &:after{
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              margin: 0 auto;
              content:"";
              width: 30px;
              height: 3px;
              background: #366FF9;
              border-radius: 2px;
            }
          }
        }
      }
    }
    .van-form{
      padding: 22px 30px;
      /deep/.van-cell__title{
        margin-right: 5px;
      }
      /deep/.van-field__label{
        width: auto;
        display: flex;
        align-items: center;
        .select{
          font-size: 14px;
          width: auto;
          background: transparent;
          border: none;
        }
        .van-icon{
          font-size: 14px;
        }
      }
      .van-field{
        position: relative;
        margin-top: 24px;
        padding: 0;
        &:after{
          left: 0;
          right: 0;
          border-bottom: 1px solid #4CCBF2;
        }
        /deep/input{
          height: 34px;
          font-size: 16px;
          font-weight: 400;
        }
        .slot-inp{
          display: flex;
          .tel-area{
            flex: 30px 0 0;
          }
        }
        /deep/.van-field__button{
          position: absolute;
          right: 0;
          bottom: -0px;
          padding: 0 0 0 13px;
          background: #ffffff;
          z-index: 1;
          .van-button{
            width: 96px;
            height: 30px;
            font-size: 12px;
            font-weight: 500;
            color: #4CCBF2;
            border-radius: 16px;
            background: transparent;
            border: 1px solid #4CCBF2;
          }
        }
      }
      .submit{
        margin-top: 30px;
        height: 48px;
        font-size: 20px;
        font-weight: 500;
        color: #FFFFFF;
        background: linear-gradient(137deg, #91E2FF 0%, #0B6CFF 100%);
        border-radius: 26px;
        border: none;
      }
      .van-checkbox{
        margin-top: 10px;
        /deep/.van-checkbox__icon {
          height: 12px;
          .van-icon{
            height: 12px;
            width: 12px;
            font-size: 10px;
            &:before{
              font-size: 10px;
            }
          }
        }
        /deep/.van-checkbox__label{
          margin-left: 2px;
          font-size: 11px;
          font-weight: 400;
          color: rgba(155, 155, 155, 0.49);
          p{
            display: inline-block;
            color: #079EFF;
          }
        }
      }
    }
    .links{
        display: flex;
        text-align: center;
        padding: 20px 0 24px 0;
        a{
          flex: 1;
          font-size: 12px;
          font-weight: 400;
          color: #079EFF;
          &:last-child{
            border-left: 1px solid #F1F1F1;
          }
        }
      }
  }
}
</style>
